import Head from "next/head";
import { useEffect, useState, useCallback } from "react";
import { SearchOutlined } from "@ant-design/icons";
import { useSelector } from "react-redux";
import axios from "axios";
import UUID from "uuidjs";
import AddModal from "../components/AddModal";
import { message } from "antd";
{
  /* <CloseOutlined /> */
}
import { PlusOutlined, CloseOutlined } from "@ant-design/icons";
// const chinaMirrorToGoogle = "http://g.histsci.org";
const chinaMirrorToGoogle = "https://deeps.top";
const oldRecord = [
  {
    id: UUID.generate(),
    title: "添加快捷方式",
  },
];
console.log(oldRecord);
export default function Home() {
  const [open, setOpen] = useState(false);
  const [records, setRecords] = useState([]);
  const [value, setValue] = useState("");
  const [addFlag, setAddFlag] = useState(0);

  const loadRecords = useCallback(() => {
    // 这样写可以减少[]的依赖
    setAddFlag((old) => old + 1);
  }, []);

  useEffect(() => {
    (async () => {
      const res = await axios.get("/getRecords");
      console.log(res);
      setRecords(
        res.data.concat(oldRecord).map((ele) => {
          return {
            ...ele,
            showClose: false,
          };
        })
      );
    })();
  }, [addFlag]);

  const deleteItem = async (row, e) => {
    e.preventDefault();
    await axios.post("/deleteItem", {
      id: row.id,
    });
    setAddFlag((old) => old + 1);
    message.success("标签删除成功");
  };

  const mouseEnter = useCallback((row, e) => {
    setRecords((old) => {
      return old.map((ele) => {
        if (ele.id === row.id) {
          ele.showClose = true;
        }
        return ele;
      });
    });
  }, []);
  const mouseLeave = useCallback((row, e) => {
    setRecords((old) => {
      return old.map((ele) => {
        if (ele.id === row.id) {
          ele.showClose = false;
        }
        return ele;
      });
    });
  }, []);

  const onChange = useCallback((e) => {
    // set不需要依赖
    setValue(e.target.value);
  }, []);

  const doSearch = useCallback(() => {
    const url = `http://g.histsci.org/search?q=${value}`;
    window.open(url, "_blank");
  }, [value]);

  const keyUp = (e) => {
    console.log(e);
    if (e.keyCode === 13) {
      doSearch();
    }
  };
  const openModal = useCallback(() => {
    setOpen(true);
  }, []);

  const closeModal = useCallback(() => {
    setOpen(false);
  }, []);
  return (
    <>
      <Head>
        <title>4-4作业</title>
      </Head>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          marginTop: "150px",
        }}
      >
        {/* <div>{test}</div> */}
        <div
          style={{
            background: `url('/img/google.jpg')`,
            width: "272px",
            height: "92px",
            backgroundSize: "100%",
            backgroundPosition: "center",
          }}
        ></div>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          marginTop: "50px",
        }}
      >
        <div
          style={{
            width: "561px",
            position: "relative",
          }}
        >
          <input
            onChange={onChange}
            onKeyUp={keyUp}
            value={value}
            placeholder="在 Google 上搜索，或者输入一个网址"
            className="input"
          />
          <SearchOutlined
            style={{
              fontSize: "25px",
              left: "15px",
              top: 0,
              bottom: 0,
              margin: "auto",
              position: "absolute",
              display: "flex",
              alignItems: "center",
            }}
          />
        </div>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          marginTop: "50px",
        }}
      >
        <div
          style={{
            width: "561px",
            display: "flex",
            // justifyContent: "space-evenly",
            flexWrap: "wrap",
          }}
        >
          {records.map((ele, index) => {
            if (ele.url) {
              return (
                <a
                  onMouseLeave={mouseLeave.bind(this, ele)}
                  onMouseEnter={mouseEnter.bind(this, ele)}
                  href={ele.url}
                  target="_blank"
                  key={ele.id}
                  className="hoverBox"
                  style={{
                    width: "95px",
                    height: "95px",
                    // backgroundColor: "red",
                    justifySelf: "flex-start",
                    margin: "0 8px",
                    marginBottom: "20px",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-evenly",
                    alignItems: "center",
                    color: "#000",
                    position: "relative",
                  }}
                >
                  {/* <div
                    className="hoverClose"
                    style={{
                      position: "absolute",
                      top: "2px",
                      right: "2px",
                      display: ele.showClose ? "block" : "none",
                      width: "20px",
                      height: "20px",
                      textAlign: "center",
                      lineHeight: "20px",
                    }}
                    onClick={deleteItem.bind(this, ele)}
                  >
                    x
                  </div> */}
                  <CloseOutlined
                    style={{
                      position: "absolute",
                      top: "2px",
                      right: "2px",
                      display: ele.showClose ? "block" : "none",
                      fontSize: "16px",
                    }}
                    className="hoverClose"
                    onClick={deleteItem.bind(this, ele)}
                  />
                  <div
                    style={{
                      width: "50px",
                      height: "50px",
                      backgroundColor: "#ddd",
                      borderRadius: "50%",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-evenly",
                    }}
                  >
                    <img
                      style={{
                        width: "25px",
                        height: "25px",
                      }}
                      src={`${chinaMirrorToGoogle}/s2/favicons?domain=${ele.url}`}
                    />
                  </div>
                  <div>{ele.title}</div>
                </a>
              );
            } else {
              return (
                <a
                  onClick={openModal}
                  key={ele.id}
                  style={{
                    width: "95px",
                    height: "95px",
                    // backgroundColor: "red",
                    justifySelf: "flex-start",
                    margin: "0 8px",
                    marginBottom: "20px",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-evenly",
                    alignItems: "center",
                    color: "#000",
                  }}
                >
                  <div
                    style={{
                      width: "50px",
                      height: "50px",
                      backgroundColor: "#ddd",
                      borderRadius: "50%",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-evenly",
                    }}
                  >
                    {/* <span
                      style={{
                        fontSize: "30px",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        lineHeight: "30px",
                      }}
                    >
                      +
                    </span> */}
                    <PlusOutlined
                      style={{
                        fontSize: "30px",
                      }}
                    />
                  </div>
                  <div>{ele.title}</div>
                </a>
              );
            }
          })}
        </div>
      </div>
      {open ? (
        <AddModal closeModal={closeModal} loadRecords={loadRecords} />
      ) : null}
    </>
  );
}
